<template>
  <div class="subject">
         <!--上面的盒子  -->
         <div class="top">
                 <!-- 左侧 -->
                 <div class="lset">
                     <!-- top -->
                    <div class="T-top">
                         <div class="T-lset">
                              <!-- 工单统计 -->
                              <div class="gong">工单统计 <span>{{yue}}~ {{present}}</span></div>
                              <!-- 详情 -->
                              <div class="xiang">
                                 <div>
                                     <p>{{total}}</p>
                                     <span>工单总数 (个)</span>
                                 </div>
                                 <div>
                                     <p>{{completedTotal}}</p>
                                     <span>完成工单 (个)</span>
                                 </div>
                                 <div>
                                     <p>{{progressTotal}}</p>
                                     <span>进行工单 (个)</span>
                                 </div>
                                 <div>
                                     <p>{{cancelTotal}}</p>
                                     <span>取消工单 (个)</span>
                                 </div>
                              </div>
                         </div>
                         <div class="T-ringt">
                           <!-- 销售统计 -->
                          <div class="xiao">销售统计 <span>{{yue}}~ {{present}}</span></div>
                           <!-- 详情 -->
                           <div class="shu">
                               <div>
                                  <p>{{numDer}}</p>
                                  <span>订单量 (个)</span>
                               </div>
                               <div>
                                  <p>{{money}}</p>
                                  <span>销售额 (万元)</span>
                               </div>
                           </div>
                         </div>
                    </div>
                    <!-- 可视化数据 -->
                    <div class="Ke">
                         <!-- 标头 -->
                         <div class="K-top">
                           <!-- 销售数据 -->
                            <div class="K-xiao">销售数据 <span>{{list[0]}}~ {{list[list.length-1]}}</span></div>
                            <!--年月周 -->
                            <div class="re">
                               <el-radio-group v-model="radio1">
                                  <el-radio-button label="周"></el-radio-button>
                                  <el-radio-button label="月"></el-radio-button>
                                  <el-radio-button label="年"></el-radio-button>
                                </el-radio-group>
                            </div>
                         </div>
                         <!-- 主体 -->
                         <div class="K-zu">
                               <!-- 折线图 -->
                              <div class="zhexian" ref='chaetBox'></div>
                              <!-- 柱状图 -->
                              <div class="zhuzhuang" ref="zhuzhuang"></div>
                         </div>
                    </div>
                 </div>
                 <!-- 右侧盒子 -->
                 <div class="ringt">
                     <!-- 商品热榜 -->
                     <div class="top">商品热榜</div>
                     <div class="zhuti" v-for='(item,index) in items' :key="index">
                      <span>{{index+1}}</span><p>{{item.skuName}}</p><span>{{item.count}}单</span>
                     </div>
                 </div>
         </div>
         <!-- 下面饼状图的盒子 -->
         <div class="Under ">
                 <!-- 合作商 -->
                 <div class="He">
                    <!-- top -->
                    <div class="top">
                       <h4>合作商点位数Top5</h4>
                       <span><i class="el-icon-more"></i></span>
                    </div>
                   <!-- 饼状图 -->
                   <div class="U-bing">
                       <!-- 图 -->
                       <div class="tu" ref='bingzhuang'> </div>
                       <!-- 详情 -->
                       <div class="xiang">
                           <div data-v-46f7d62d="" class="collect">
                            <div  class="count">
                                  {{Points}}
                                </div><div data-v-46f7d62d="" class="name">
                                  点位数
                                </div><div data-v-46f7d62d="" class="count ">
                                  {{setPartner}}
                                </div><div data-v-46f7d62d="" class="name">
                                  合作商数
                                </div></div>
                       </div>
                   </div>
                 </div>
                 <!-- 异常设备监控 -->
                 <div class="Yi">
                    <!-- top -->
                    <div class="top">
                       <h4>异常设备监控</h4>
                       <span><i class="el-icon-more"></i></span>
                    </div>
                       <div class="empty">
                          <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png">
                          <div class="tips">
                             暂无数据
                          </div>

                    </div>
                 </div>
         </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import { fewItems, getOrder, getIincome, getTotal, getPartner, TotalPoints, setPartner, GrossSales, SalesStatistics } from '@/api/Work-order'
export default {
  name: 'DikticDkdHome',

  data () {
    return {
      radio1: '月',
      // 当前月时间
      yue: '',
      yue1: '',
      // 当前时间
      present: moment(Date.now()).format('YYYY-MM-DD '),
      // 获取工单统计
      total: 0,
      completedTotal: 0,
      progressTotal: 0,
      cancelTotal: 0,
      // 获取销售统计
      money: 0,
      numDer: 0,
      // 获取合作商点位汇总统计
      partner: [],
      // 点为数
      Points: 0,
      // 合作商
      setPartner: 0,
      // 时间
      list: [],
      // 商品的销售
      items: []
    }
  },
  // // 创建钩子
  // created () {
  //   this.getOrder()
  // },
  mounted () {
    // 获取当前月的第一天
    const getNowMonthFirst = () => {
      const date = new Date()
      date.setDate(1)
      // eslint-disable-next-line
      return moment(date).format('YYYY-MM-DD ')
    }
    const getNowMonthFirst1 = () => {
      const date = new Date()
      date.setDate(1)
      // eslint-disable-next-line
      return moment(date).format('YYYY-MM-DD')
    }
    this.yue = getNowMonthFirst()
    this.yue1 = getNowMonthFirst1()

    // console.log(this.yue)
    // console.log(this.present)
    this.getOrder()
    this.getIincome()
    this.getTotal()
    this.getPartner()
    this.TotalPoints()
    this.setPartner1()
    this.GrossSales()
    this.SalesStatistics()
    this.fewItems()
  },

  methods: {
    // 获取工单统计
    async getOrder () {
      const res = await getOrder({
        start: this.yue + '00:00:00',
        end: this.present + '23:59:59'
      })
      // console.log(res)
      res.forEach(ele => {
        this.total += ele.total
        this.completedTotal += ele.completedTotal
        this.progressTotal += ele.progressTotal
        this.cancelTotal += ele.cancelTotal
      })
    },
    // 获取销售统计
    async getIincome () {
      const res = await getIincome({
        start: this.yue + '00:00:00',
        end: this.present + '23:59:59'
      })
      // console.log(res)
      // 把拿来的数字转换一下
      this.money = Number(res / 1000000).toFixed(2)
    },
    //
    async getTotal () {
      const res = await getTotal({
        start: this.yue + '00:00:00',
        end: this.present + '23:59:59'
      })
      this.numDer = res
    },
    // 合作商点位汇总统计
    async getPartner () {
      const res = await getPartner()
      // 饼状图
      const Mybingzhuang = echarts.init(this.$refs.bingzhuang)
      const option2 = {
        toolbox: {
          show: true
        },
        tooltip: { // 提示框组件
          trigger: 'item', // item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        },
        series: [
          {
            name: '合作商点位数Top5',
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              normal: {
                show: true,
                formatter: '{b}: {c}{d}%' // 自定义显示格式(b:name, c:value, d:百分比)
              }
            },
            data: res
          }
        ]
      }
      Mybingzhuang.setOption(option2)
      // this.partner = res
    },
    // 获取点位总数
    async TotalPoints () {
      const res = await TotalPoints()
      // console.log(res)
      this.Points = res
    },
    // 获取合作商
    async setPartner1 () {
      const res = await setPartner()
      this.setPartner = res
    },
    // 根据地区汇总销售额数据(销售量分布)
    async GrossSales () {
      const time = moment(Date.now()).format('YYYY-MM-DD')
      const res = await GrossSales({
        start: this.yue1,
        end: time
      })
      const series = res.series
      const arr = []
      series.forEach(ele => {
        arr.push(ele / 100)
      })
      // console.log(arr)
      // 柱状图
      const Myzhuzhuang = echarts.init(this.$refs.zhuzhuang)
      const option1 = {
        title: {
          text: '销售额分布',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: res.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: arr,
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              emphasis: {
                barBorderRadius: 1
              },
              normal: {
                // 柱形图圆角，初始化效果
                barBorderRadius: [3, 3, 0, 0]
              }
            }
          }

        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        }
      }
      Myzhuzhuang.setOption(option1)
      // console.log(res)
    },
    // 获取销售额统计
    async SalesStatistics () {
      const time = moment(Date.now()).format('YYYY-MM-DD')
      const res = await SalesStatistics({
        collectType: 1,
        start: this.yue1,
        end: time
      })
      const series = res.series
      const arr = []
      series.forEach(ele => {
        arr.push(ele / 100)
      })
      // console.log(res)
      // 折线图
      const Myzhexian = echarts.init(this.$refs.chaetBox)
      const option = {
        title: {
          text: '销售额趋势图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: res.xAxis
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        series: [
          {
            data: arr,
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: 'red',
            // eslint-disable-next-line
          areaStyle: { // 区域填充渐变颜色
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255,0,0, 0.7)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255,255,255, 0)' // 100% 处的颜色
                }]
              }
            }
          }
        ]
      }
      Myzhexian.setOption(option)
      this.list = res.xAxis
      // console.log(this.list[this.list.length - 1])
    },
    // 获取销售前几的商品
    async fewItems () {
      const time = moment(Date.now()).format('YYYY-MM-DD')
      const res = await fewItems({
        topValue: 10,
        start: this.yue1,
        end: time
      })
      this.items = res
      // console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
 .subject{
    width: 100%;
    min-height: 1080px;
    background-color:#f8fafd;
    .top{
       height: 540px;
       width: 100%;
       display: flex;
       .lset{
          width: 75%;
          height: 100%;
          border-radius:20px;
          padding: 0 10px;
          .T-top{
             width: 100%;
             height: 170px;
             display: flex;
             .T-lset{
                width: 60%;
                height: 100%;
                border-radius:20px;
                margin-right:20px;
                background-color: #fbffda;
                background: #e9f3ff;
                background-image: url(…jFo4e5XU3F6Uv4PzsqEn/B1VshFHJ0SGMAAAAAElFTkSuQmCC), url(https://likede2-admin.itheima.net/img/task.66b715b7.png);
                background-repeat: no-repeat,no-repeat;
                background-position: 0 0,calc(100% - 12px) 100%;
                padding: 20px;
                box-sizing: border-box;
                .gong{
                    font-weight: 700;
                    span{
                          margin-left: 10px;
                          font-size: 12px;
                          font-weight: 400;
                          color: #999;
                    }
                }
                .xiang{
                    height: 98%;
                    width: 100%;
                    display: flex;
                    div{
                      margin-top: 25px;
                      width: 25%;
                      height: 100px;
                      p{
                        color: #072074;
                         font-size: 30px;
                         font-weight: 700;
                        text-shadow: 2px 4px 7px rgba(85,132,255,.5);
                      }
                     span{
                       font-size: 12px;
                       color: #91a7dc;
                     }
                    }
                }
             }
             .T-ringt{
                width: 38%;
                height: 100%;
                border-radius:20px;
                background: #fbefe8 url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
                 padding: 20px;
                box-sizing: border-box;
                .xiao{
                   font-weight: 700;
                   span{
                          margin-left: 10px;
                          font-size: 12px;
                          font-weight: 400;
                          color: #999;
                    }
                }
                .shu{
                    height: 98%;
                    width: 100%;
                    display: flex;
                    div{
                          margin-top: 25px;
                       width: 50%;
                       height: 100px;
                       text-align: center;
                       p{
                         font-size: 30px;
                         font-weight: 700;
                         color: #ff5757;
                         text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
                       }
                       span{
                          font-size: 12px;
                          color: #de9690;
                       }
                    }
                }
             }
          }
          .Ke{
             margin-top:20px ;
             padding: 20px;
             width: 100%;
             height: 350px;
             border-radius:20px ;
             background-color: #fff;
              box-sizing: border-box;
              .K-top{
                 height: 34px;
                 width: 100%;
                 display: flex;
                 justify-content: space-between;
                .K-xiao{
                  font-weight: 700;
                   span{
                          margin-left: 10px;
                          font-size: 12px;
                          font-weight: 400;
                          color: #999;
                    }
                }
              .re{
                 height: 34px;
                 line-height: 34px;
                ::v-deep .el-radio-button__inner{
                  height: 32px;
                    padding: 8px 17px;
                 }
              }
              }
              .K-zu{
                 width: 100%;
                 height: 280px;
                 display: flex;
                 .zhexian{
                  padding-top:10px;
                   width: 50%;
                   height: 278px;
                 }
                 .zhuzhuang{
                  padding-top:10px;
                   width: 50%;
                   height: 278px;
                 }
              }
          }
       }
       .ringt{
           width: 23%;
           height: 100%;
           border-radius:20px;
           padding: 20px;
           background-color: #ffffff;
           box-sizing: border-box;
           .top{
             height: 20px;
             font-weight: 700;
           }
           .zhuti{
             margin-top:20px ;
             height: 24px;
             display: flex;
             justify-content:space-between;
             text-align:left;
             span{
               width: 20%;
             }
           }
       }
    }
    .Under{
        height: 355px;
        width: 100%;
        margin: 20px 0;
             box-sizing: border-box;
        padding: 10px;
        display: flex;
        .He{
            width: 60%;
            height:100%;
            background-color: #fff;
            border-radius: 20px;
            padding: 20px;
            box-sizing: border-box;
            .top{
                display: flex;
                justify-content: space-between;
                height: 20px;
                span{
                   width: 18px;
                   height: 18px;
                   line-height: 18px;
                   text-align: center;
                   border-radius:15px ;
                   border: solid 1px  #7494ff;
                   color: #7494ff;
                }
            }
            .U-bing{
                height: 300px;
                width: 100%;
                display: flex;
                .tu{
                   width: 75%;
                   height: 300px;
                }
                .xiang{
                    width: 24.5%;
                    height: 100%;
                    padding-top: 30px;
                    padding-left: 10px;
                    box-sizing: border-box;
                    .collect{
                          width: 70%;
                          height: 230px;
                          padding-left: 35px;
                          background-color: #f8f8f9;
                          background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
                          background-size: 50% 50%;
                          background-repeat: no-repeat;
                          .count{
                            height: 33px;
                            font-size: 24px;
                            padding-top:40px;

                            font-weight: 600;
                            color: #072074;
                            line-height: 33px;
                          }
                          .name{
                                height: 17px;
                                margin-top: 6px;
                                font-size: 12px;
                                font-weight: 400;
                                color: #000412;
                                line-height: 17px;
                          }
                    }
                }
            }
        }
        .Yi{
           width: 38%;
           height: 100%;
           margin-left:20px;
            background-color: #fff;
            border-radius: 20px;
            padding: 20px;
            box-sizing: border-box;
           .top{
                display: flex;
                justify-content: space-between;
                height: 20px;
                span{
                   width: 18px;
                   height: 18px;
                   line-height: 18px;
                   text-align: center;
                   border-radius:15px ;
                   border: solid 1px  #7494ff;
                   color: #7494ff;
                }
            }
            .empty{
              width: 100%;
              height: 100%;
              text-align: center;
              padding-top:18% ;
              .tips{
                 margin-top: 20px;
              }
            }
        }
    }
  }

</style>
